<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布信息</title>
    <link rel="stylesheet" th:href=" @{/css/bootstrap.min.css }">
    <link rel="stylesheet" th:href="@{/css/blog.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.min.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/editormd.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/bootstrap.min.js}" type="application/javascript"></script>
    <script th:src="@{https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js}"></script>
</head>
<body>
<!--thymeleaf引入头部导航栏-->
<div th:insert="~{header.html :: nav}"></div>
<div class="container-fluid main-color">
    <div class="row main main-color">
        <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 main-left">
            <h3><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp&nbsp&nbsp发布</h3>
            <hr>
            <form action="/publish" method="post" onSubmit="return beforeSubmit(this);">
                <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题">
                    <h5 id="titlediv" style="color: red">输入标题不能为空</h5>
                </div>
                <div class="form-group" id="question-editor">
                    <label for="description">请补充说明</label>
                    <textarea name="description" id="description" class="form-control" th:text="${description}"
                              style="display: none;"
                              rows="10"
                              cols="30">
                    </textarea>
                </div>
                <script type="text/javascript">
                    $(function () {
                        var editor = editormd("question-editor", {
                            width: "100%",
                            height: 500,
                            path: "../js/lib/",
                            placeholder:"请输入问题描述"
                        });
                    });
                </script>
                <div class="form-group">
                    <label for="tag">标签</label>
                    <input type="text" class="form-control" id="tag" name="tag" placeholder="请输入标签，以逗号分隔">
                </div>
                <div class="row" style="right: auto">
                    <div class="form-group col-xs-2 btn pull-right ">
                        <label for="money" style="color: red">请输入悬赏价格</label>
                        <input type="text-align:right" onkeyup="this.value=this.value.replace(/\D/g,'')"
                               class="form-control" id="money" name="money" placeholder="请输入悬赏价格">
                        <h5 id="moneydiv" style="color: red">赏金金额需要大于0</h5>
                    </div>
                </div>
                <br><br>
                <button type="submit" class="btn btn-success" style="float: right">发布</button>
            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 ">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 main-right">
            <h3>Markdown帮助文档</h3><br>
                <div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" ><a href="#home" aria-controls="home" role="tab" data-toggle="tab">标题</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">文本样式</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">代码片</a></li>
                        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">连接</a></li>
                        <li role="presentation"><a href="#help_table" aria-controls="help_table" role="tab" data-toggle="tab">表格</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <h1># 一级目录</h1>
                            <h2>## 二级目录</h2>
                            <h3>### 三级目录</h3>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            *强调文本* <br>
                            **加粗文本** <br>
                            ==标记文本==<br>
                            ~~删除文本~~<br>
                            > 引用文本<br>
                            H~2~O is是液体。<br>
                            2^10^ 运算结果是 1024。<br>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="messages">
                            ```java<br>
                            代码<br>
                            代码<br>
                            代码<br>
                            ```<br>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="settings">
                            链接: [link](https://www.csdn.net/).
                        </div>
                        <div role="tabpanel" class="tab-pane" id="help_table">
                            项目     | Value<br>
                            -------- | -----<br>
                            电脑  | $1600<br>
                            手机  | $12<br>
                            导管  | $1<br>
                            <br>
                            | Column 1 | Column 2      |<br>
                            |:--------:| -------------:|<br>
                            | centered 文本居中 | right-aligned 文本居右 |<br>
                        </div>
                    </div>

                </div>

        </div>
        </div>
    </div>
    <!--小猫-->
    <script>
        $("#titlediv").css("display", "none");
        $("#moneydiv").css("display", "none");

        function beforeSubmit(form) {
            if (form.title.value == '') {
                $("#titlediv").css("display", "block");//显示div
                form.title.focus();
                return false;
            }
            if (form.money.value <= 0) {
                alert('悬赏金额需大于0');
                form.money.focus();
                return false;
            }
            return true;
        }

        L2Dwidget.init({
            // 更换模型地址前后都需要修改
            // 示例:"https://unpkg.com/live2d-widget-model-unitychan/assets/unitychan.model.json"
            "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
                "scale": 1
            },
            // 设置位置
            "display": {
                "position": "right",
                "width": 100,
                "height": 150,
                "hOffset": 30,
                "vOffset": 0
            },
            "mobile": {
                "show": true,
                "scale": 1.5
            },
            // 透明度设置
            "react": {
                "opacityDefault": .8,
                "opacityOnHover": 1
            }
        });

    </script>
</div>
<div th:insert="~{footer.html :: footer}"></div>
</body>
</html>